<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOSS挑战模式 - 贪吃蛇:新世界</title>
    
    <!-- Bootstrap CSS -->
    <link href="../plugin/bootstrap-5.3.8-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="../plugin/bootstrap-icons-1.13.1/font/bootstrap-icons.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../plugin/jquery-3.7.1.min.js"></script>
    
    <!-- 自定义BOSS游戏样式 -->
    <link href="css/boss-game.css" rel="stylesheet">
</head>
<body class="boss-game-body">
    <!-- 游戏主容器 -->
    <div class="container-fluid h-100">
        <div class="row h-100">
            
            <!-- 左侧栏：玩家状态 -->
            <div class="col-md-2 boss-sidebar boss-left-sidebar">
                <div class="sidebar-content">
                    <!-- 玩家信息 -->
                    <div class="player-info">
                        <h4 class="text-center text-warning mb-4">
                            <i class="bi bi-person-circle me-2"></i>玩家状态
                        </h4>
                        
                        <!-- 玩家血量 -->
                        <div class="status-item">
                            <div class="status-label">
                                <i class="bi bi-heart-fill text-danger me-2"></i>生命值
                            </div>
                            <div class="status-value">
                                <div class="health-bar">
                                    <div class="health-fill" id="playerHealthFill" style="width: 100%"></div>
                                </div>
                                <span id="playerHealth">100/100</span>
                            </div>
                        </div>
                        
                        <!-- 玩家长度 -->
                        <div class="status-item">
                            <div class="status-label">
                                <i class="bi bi-arrow-right-square-fill text-success me-2"></i>蛇长度
                            </div>
                            <div class="status-value" id="playerLength">3</div>
                        </div>
                        
                        <!-- 玩家分数 -->
                        <div class="status-item">
                            <div class="status-label">
                                <i class="bi bi-star-fill text-warning me-2"></i>分数
                            </div>
                            <div class="status-value" id="playerScore">0</div>
                        </div>
                    </div>
                    
                    <!-- 操作方式 -->
                    <div class="controls-info mt-4">
                        <h5 class="text-info">
                            <i class="bi bi-keyboard me-2"></i>操作方式
                        </h5>
                        <div class="control-item">
                            <kbd>W/A/S/D</kbd> 或 <kbd>↑/←/↓/→</kbd>
                            <span class="control-desc">移动方向</span>
                        </div>
                        <div class="control-item">
                            <kbd>F</kbd>
                            <span class="control-desc">使用道具</span>
                        </div>
                        <div class="control-item">
                            <kbd>ESC</kbd>
                            <span class="control-desc">暂停游戏</span>
                        </div>
                    </div>
                    
                    <!-- 物品栏 -->
                    <div class="inventory-info mt-4">
                        <h5 class="text-success">
                            <i class="bi bi-backpack me-2"></i>物品栏
                        </h5>
                        <div class="inventory-grid" id="inventoryGrid">
                            <div class="inventory-slot empty" data-slot="1">
                                <div class="slot-content">空</div>
                            </div>
                            <div class="inventory-slot empty" data-slot="2">
                                <div class="slot-content">空</div>
                            </div>
                            <div class="inventory-slot empty" data-slot="3">
                                <div class="slot-content">空</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 中间游戏区域 -->
            <div class="col-md-8 boss-game-area">
                <div class="game-container">
                    <!-- BOSS血量条 -->
                    <div class="boss-health-bar-container">
                        <div class="boss-name" id="bossName">岩石巨蟒</div>
                        <div class="boss-health-bar">
                            <div class="boss-health-fill" id="bossHealthFill" style="width: 100%"></div>
                            <div class="boss-health-text" id="bossHealthText">1000/1000</div>
                        </div>
                    </div>
                    
                    <!-- 游戏画布 -->
                    <div class="game-canvas-container">
                        <canvas id="bossGameCanvas" width="800" height="600"></canvas>
                    </div>
                    
                    <!-- 游戏控制按钮 -->
                    <div class="game-controls">
                        <button class="btn btn-warning btn-sm" id="pauseBtn">
                            <i class="bi bi-pause-fill me-1"></i>暂停
                        </button>
                        <button class="btn btn-danger btn-sm" id="restartBtn">
                            <i class="bi bi-arrow-clockwise me-1"></i>重新开始
                        </button>
                        <button class="btn btn-secondary btn-sm" id="backBtn">
                            <i class="bi bi-arrow-left me-1"></i>返回
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧栏：BOSS信息 -->
            <div class="col-md-2 boss-sidebar boss-right-sidebar">
                <div class="sidebar-content">
                    <!-- BOSS信息 -->
                    <div class="boss-info">
                        <h4 class="text-center text-danger mb-4">
                            <i class="bi bi-skull me-2"></i>BOSS信息
                        </h4>
                        
                        <!-- BOSS属性 -->
                        <div class="boss-stats">
                            <div class="stat-item">
                                <div class="stat-label">难度</div>
                                <div class="stat-value" id="bossDifficulty">常见 ★☆☆☆</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-label">攻击力</div>
                                <div class="stat-value" id="bossAttack">20</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-label">移动速度</div>
                                <div class="stat-value" id="bossSpeed">慢</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- BOSS弱点 -->
                    <div class="boss-weakness mt-4">
                        <h5 class="text-warning">
                            <i class="bi bi-shield-slash me-2"></i>BOSS弱点
                        </h5>
                        <div class="weakness-list" id="bossWeakness">
                            <div class="weakness-item">
                                <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                                <span>释放护盾后有20秒虚弱期</span>
                            </div>
                            <div class="weakness-item">
                                <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                                <span>虚弱期受到伤害加倍</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 击败方法 -->
                    <div class="boss-strategy mt-4">
                        <h5 class="text-success">
                            <i class="bi bi-lightbulb-fill me-2"></i>击败方法
                        </h5>
                        <div class="strategy-list" id="bossStrategy">
                            <div class="strategy-item">
                                <i class="bi bi-1-circle-fill text-primary me-2"></i>
                                <span>拾取陷阱放置在BOSS路径上</span>
                            </div>
                            <div class="strategy-item">
                                <i class="bi bi-2-circle-fill text-primary me-2"></i>
                                <span>等待BOSS释放护盾后的虚弱期</span>
                            </div>
                            <div class="strategy-item">
                                <i class="bi bi-3-circle-fill text-primary me-2"></i>
                                <span>在虚弱期集中攻击BOSS</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 当前状态 -->
                    <div class="current-status mt-4">
                        <h5 class="text-info">
                            <i class="bi bi-info-circle me-2"></i>当前状态
                        </h5>
                        <div class="status-message" id="currentStatus">
                            <span class="text-success">战斗准备就绪</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 暂停菜单 -->
    <div id="pauseMenu" class="pause-menu hidden">
        <div class="pause-content">
            <h3 class="text-warning">游戏暂停</h3>
            <div class="pause-options">
                <button class="btn btn-success btn-lg" id="resumeBtn">继续游戏</button>
                <button class="btn btn-warning btn-lg" id="restartFromPauseBtn">重新开始</button>
                <button class="btn btn-secondary btn-lg" id="backFromPauseBtn">返回主菜单</button>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="../plugin/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
    <!-- BOSS游戏逻辑 -->
    <script src="js/boss-game.js"></script>
</body>
</html>